<script lang="ts" setup>
import { h, reactive, toRefs } from 'vue'
import { ReadOutlined } from '@ant-design/icons-vue'
import { Api } from '@/api'
import to from '@/utils/awaitTo'

// 引用声明
const props = defineProps({
  row: {
    type: Object,
    default: () => {
    }
  }
})

// 响应式数据
const state = reactive({
  open: false,
  title: '查看视频发布信息',
  loading: false,
  form: {
    publishCopy: '无', //文案
    postTopic: ['无'], //话题
    topicTitle: '话题标题'
  }
})

// 响应式数据解析
const { loading, title, open, form } = toRefs(state)

// 查看文案
const handleOpen = async () => {
  console.log(props.row)
  const [error, data] = await to(Api.video.videoEchoRelease(props.row.videoId))
  if (!error) {

    // 话题
    if (data.postTopic) {
      data.postTopic = data.postTopic.replace(/[\r\n\s]+/g, '').split('#') //去掉所有换行
      data.postTopic = data.postTopic.filter((item: string) => item)
      form.value.postTopic = data.postTopic
    }

    //文案
    if (data.publishCopy) {
      form.value.publishCopy = data.publishCopy
    }

    //话题标题
    if (props.row.topicTitle) {
      form.value.topicTitle = props.row.topicTitle
    }
    open.value = true;
  }
}
</script>

<template>
  <div>
    <a-button :icon="h(ReadOutlined)" :loading="loading" type="primary" @click="handleOpen">查看文案</a-button>

    <a-modal v-model:open="open" :footer="false" :maskClosable="false" :title="title" :width="600">
      <a-descriptions :title="form.topicTitle" layout="">
        <a-descriptions-item :span="24" label="话题">{{
            form.publishCopy
          }}
        </a-descriptions-item>

        <a-descriptions-item :span="24" label="文案">
          <a-space wrap>
            <a-tag v-for="(item, index) in form.postTopic" :key="index">{{ item }}</a-tag>
          </a-space>
        </a-descriptions-item>
      </a-descriptions>
    </a-modal>
  </div>
</template>

<style lang="less" scoped>

</style>
